<template>
    <div id="profile">
        <!-- 顶部导航栏 -->
       <Nav-Bar class="profile-navbar"><div slot="right">设置</div></Nav-Bar>
        <!-- 登入注册 -->
        <User-Info/>
        <div class="my-info">
        <!-- 我的余额、我的优惠价、我的积分 -->
        <Detail-Info>
          <div slot="name">0.00 <span class="sp">元</span></div>
          <div slot="value">我的余额</div>
        </Detail-Info>
         <Detail-Info class="detailContent">
          <div slot="name">0 <span class="sp">个</span></div>
          <div slot="value">我的优惠价</div>
        </Detail-Info>
         <Detail-Info>
          <div slot="name">0 <span class="sp">分</span></div>
          <div slot="value">我的积分</div>
        </Detail-Info>
        </div>
        <!-- 会员、积分商城、我的信息、我的购物车、下载购物APP -->
        <List-View class="order-list" :list-data="orderList"/>
         <!-- <List-View class="service-list" :list-data="serviceList"/> -->
    </div>
</template>

<script>
// components/common/
import NavBar from 'components/common/navbar/NavBar'

// childComps
import UserInfo from './childComps/UserInfo'
import DetailInfo from './childComps/DetailInfo'
import ListView from './childComps/ListView'

export default {
    name:'Profile',
    data() {
      return {
        orderList: [
          {icon: '#order', iconColor: '#ff8198', info: '我的消息'},
          {icon: '#point', iconColor: '#fc7b53', info: '积分商城'},
          {icon: '#vip', iconColor: '#ffc636', info: '会员卡'},
          {icon: '#service', iconColor: '#ff8198', info: '我的购物车'},
          {icon: '#download', iconColor: '#ff8198', info: '下载购物APP'}
        ],
        serviceList: [
          {icon: '#service', iconColor: '#ff8198', info: '我的购物车'},
          {icon: '#download', iconColor: '#ff8198', info: '下载购物APP'},
        ]
      }
    },
    components: {
        NavBar,
        UserInfo,
        DetailInfo,
        ListView,
    }
}
</script>

<style scoped>
#profile{
    height: 100vh;
    background-color: #e4e4e4b3;
}

.profile-navbar {
    color: #666;
    font-weight: 100;
    box-shadow: none;
}
.my-info{
    margin: 0 7px;
    border-radius: 8px;
    display: flex;
    background-color: #fff;
    margin-bottom: 8px;
}
.detailContent{
    border-right: 1px solid #e4e4e49e;
    border-left: 1px solid #e4e4e49e;
}
.sp{
    color: #666;
    font-weight: normal;
    font-size: 15px;
}
</style>